<template>
	
  <div class="manageFinances">
	  <div>
	  <div class="head">
	  	<div class="head-title">{{$t('Zichan')}}</div>
	  	<div class="head-ye">{{$t('Xianshiyue')}} <svg @click="show()" class="eye-show" style="width: 18px;height: 18px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2217" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z" p-id="2218"></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" p-id="2219"></path></svg></div>
	  	<div class="head-money">{{is_show?total:show_str}}</div>
	  	<div class="flex income">
	  		<div>
	  			<span>{{$t('Zuotian')}}</span>
	  			<p>{{is_show ? '+'+yesday : show_str}}</p>
	  		</div>
	  		<div>
	  			<span>{{$t('Jintian')}}</span>
	  			<p>{{is_show ? '+'+tday : show_str}}</p>
	  		</div>
	  		<div>
	  			<span>{{ $t('Zongji') }}</span>
	  			<p>{{is_show ? '+'+total_inc : show_str}}</p>
	  		</div>
	  	</div>
	  </div>
	  <div class="tab flex">
	  	<div class="item" @click="selectTab(1)">
	  		<span>
	  			<svg t="1651741241893" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2325" width="32" height="32"><path d="M170.666667 56.888889h625.777777c62.577778 0 113.777778 51.2 113.777778 113.777778v682.666666c0 62.577778-51.2 113.777778-113.777778 113.777778H170.666667c-62.577778 0-113.777778-51.2-113.777778-113.777778V170.666667c0-62.577778 51.2-113.777778 113.777778-113.777778z m0 56.888889c-34.133333 0-56.888889 22.755556-56.888889 56.888889v682.666666c0 34.133333 22.755556 56.888889 56.888889 56.888889h625.777777c34.133333 0 56.888889-22.755556 56.888889-56.888889V170.666667c0-34.133333-22.755556-56.888889-56.888889-56.888889H170.666667z m164.977777 369.777778C256 483.555556 193.422222 420.977778 193.422222 341.333333s62.577778-142.222222 142.222222-142.222222S477.866667 261.688889 477.866667 341.333333 409.6 483.555556 335.644444 483.555556z m0-56.888889c45.511111 0 85.333333-39.822222 85.333334-85.333334s-39.822222-85.333333-85.333334-85.333333-85.333333 39.822222-85.333333 85.333333 34.133333 85.333333 85.333333 85.333334z m227.555556-170.666667h170.666667c17.066667 0 28.444444 11.377778 28.444444 28.444444s-11.377778 28.444444-28.444444 28.444445h-170.666667c-17.066667 0-28.444444-11.377778-28.444444-28.444445s11.377778-28.444444 28.444444-28.444444z m0 113.777778h170.666667c17.066667 0 28.444444 11.377778 28.444444 28.444444s-11.377778 28.444444-28.444444 28.444445h-170.666667c-17.066667 0-28.444444-11.377778-28.444444-28.444445s11.377778-28.444444 28.444444-28.444444z m-227.555556 455.111111c-79.644444 0-142.222222-62.577778-142.222222-142.222222s62.577778-142.222222 142.222222-142.222223 142.222222 62.577778 142.222223 142.222223-68.266667 142.222222-142.222223 142.222222z m0-56.888889c45.511111 0 85.333333-39.822222 85.333334-85.333333s-39.822222-85.333333-85.333334-85.333334-85.333333 39.822222-85.333333 85.333334 34.133333 85.333333 85.333333 85.333333z m227.555556-170.666667h170.666667c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444h-170.666667c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445z m0 113.777778h170.666667c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444h-170.666667c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445z" fill="#02a7f0" p-id="2326"></path></svg>
	  		</span>
	  		<span :class="tabActive==1?'ative':''">{{$t('Biaoqian')}}</span>
	  	</div>
	  	<div class="item" @click="selectTab(2)">
	  		<span><svg t="1651741361815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2831" width="32" height="32"><path d="M929.845372 700.580494 929.845372 110.550499 94.154628 110.550499l0 590.029994 376.909211 0 0 47.825345L284.512152 861.646818l32.498611 53.537141 185.363352-112.536735 185.392543 112.536735 32.464555-53.537141-186.551687-113.240979 0-47.825345L929.845372 700.580494 929.845372 700.580494zM197.959467 637.963591 424.164107 397.809082l161.537037 146.7321L867.229686 224.798584l0 413.184468L197.959467 637.983052 197.959467 637.963591zM829.25281 173.167402 580.721567 455.451273 420.766951 310.130093 156.77518 590.390022 156.77518 173.175916l672.47763 0L829.25281 173.167402zM829.25281 173.167402" p-id="2832" fill="#02a7f0"></path></svg></span>
	  		<span :class="tabActive==2?'ative':''">{{$t('Zichanleibie')}}</span>
	  	</div>
	  	<div class="item" @click="selectTab(3)">
	  		<span>
				<svg t="1651984889857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2290" width="32" height="32"><path d="M869.209302 928.744186H154.790698a95.362977 95.362977 0 0 1-95.255814-95.255814V690.604651a23.813953 23.813953 0 0 1 47.627907 0v142.883721a47.627907 47.627907 0 0 0 47.627907 47.627907h714.418604a47.627907 47.627907 0 0 0 47.627907-47.627907V190.511628a47.627907 47.627907 0 0 0-47.627907-47.627907H154.790698a47.627907 47.627907 0 0 0-47.627907 47.627907v238.139535a23.813953 23.813953 0 0 1-47.627907 0V190.511628a95.362977 95.362977 0 0 1 95.255814-95.255814h714.418604a95.362977 95.362977 0 0 1 95.255814 95.255814v642.976744a95.362977 95.362977 0 0 1-95.255814 95.255814z" fill="#02a7f0" p-id="2291"></path><path d="M797.96986 345.302326H655.645767a23.813953 23.813953 0 0 0 0 47.627907H752.52093L562.223628 584.025302l-98.053954-116.354976a47.306419 47.306419 0 0 0-67.869767-4.762791L189.154233 649.049302a23.885395 23.885395 0 0 0-1.857489 33.625303 23.659163 23.659163 0 0 0 33.494326 1.857488l207.181395-186.09414 98.042047 116.354977a47.461209 47.461209 0 0 0 34.244465 16.812651 46.973023 46.973023 0 0 0 35.518511-13.907348l190.333024-191.09507V523.906977A23.718698 23.718698 0 1 0 833.488372 523.906977V381.023256a35.72093 35.72093 0 0 0-35.518512-35.72093z" fill="#02a7f0" p-id="2292"></path></svg>
	  		</span>	
	  		<span :class="tabActive==3?'ative':''">{{$t('ShouruXiangqing')}}</span>
	  	</div>
	  	<div class="item" @click="selectTab(4)">
	  		<span>
	  			<svg t="1651740828598" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1973" width="150" height="150"><path d="M902.386347 299.738453c-0.02048-0.02048 0-0.054613-0.02048-0.085333-0.4096-1.93536-1.1264-3.754667-2.048-5.471573-0.211627-0.395947-0.426667-0.771413-0.648533-1.153707-1.04448-1.723733-2.22208-3.34848-3.67616-4.73088l0-0.01024L618.038613 24.139093c-0.006827 0-0.034133-0.01024-0.034133-0.03072l-0.037547-0.027307c-0.01024-0.013653-0.044373-0.013653-0.064853-0.03072-1.419947-1.355093-3.085653-2.450773-4.840107-3.42016-0.433493-0.23552-0.853333-0.457387-1.314133-0.662187-1.764693-0.836267-3.631787-1.52576-5.618347-1.921707-0.170667-0.01024-0.324267-0.01024-0.47104-0.017067-1.344853-0.24576-2.69312-0.402773-4.12672-0.402773L201.8816 17.626453c-36.939093 0-67.003733 28.699307-67.003733 63.993173l0 864.576853c0 35.283627 30.06464 64.01024 67.003733 64.01024l633.965227 0c36.94592 0 66.993493-28.726613 66.993493-64.01024L902.84032 304.049493C902.84032 302.578347 902.66624 301.134507 902.386347 299.738453M823.197013 281.82528l-198.362453 0L624.83456 93.313707 823.197013 281.82528zM856.306347 946.213547c0 10.769067-9.17504 19.554987-20.45952 19.554987L201.8816 965.768533c-11.30496 0-20.476587-8.779093-20.476587-19.554987L181.405013 81.629867c0-10.789547 9.17504-19.551573 20.476587-19.551573l376.425813 0 0 241.96096c0 12.274347 10.43456 22.224213 23.261867 22.224213l254.743893 0L856.306347 946.213547 856.306347 946.213547z" p-id="1974" fill="#02a7f0"></path><path d="M711.3216 738.78528 313.50784 738.78528c-12.20608 0-22.09792 10.417493-22.09792 23.27552 0 12.87168 9.888427 23.27552 22.09792 23.27552l397.810347 0c12.19584 0 22.09792-10.407253 22.09792-23.27552C733.412693 749.202773 723.51744 738.78528 711.3216 738.78528" p-id="1975" fill="#02a7f0"></path><path d="M711.3216 585.63584 313.50784 585.63584c-12.20608 0-22.09792 10.41408-22.09792 23.261867 0 12.868267 9.888427 23.272107 22.09792 23.272107l397.810347 0c12.19584 0 22.09792-10.386773 22.09792-23.272107C733.412693 596.04992 723.51744 585.63584 711.3216 585.63584" p-id="1976" fill="#02a7f0"></path><path d="M291.396267 455.758507c0 12.8512 9.89184 23.261867 22.09792 23.261867l397.810347 0c12.209493 0 22.104747-10.410667 22.104747-23.261867 0-12.864853-9.888427-23.268693-22.104747-23.268693L313.494187 432.489813C301.29152 432.493227 291.396267 442.893653 291.396267 455.758507" p-id="1977" fill="#02a7f0"></path></svg>
	  		</span>
	  		<span :class="tabActive==4?'ative':''">{{$t('Jiaoyilishi')}}</span>
	  	</div>
	  </div>
	  </div>
	  
	  <Project :tabActive="tabActive" v-if="tabActive == 1" />
	  <MyOrder :tabActive="tabActive" v-if="tabActive == 2"/>
	  <tab1_income :type="8" v-if="tabActive == 3"/>
	  <tab_income :type="9" v-if="tabActive == 4"/>
    <!-- <van-tabs v-model="tabActive" swipeable class="tab-theme tab-bgGray">
      <van-tab :name="1" title="項目">
        <Project :tabActive="tabActive" />
      </van-tab>
      <van-tab :name="2" title="我的訂單">
        <MyOrder :tabActive="tabActive" />
      </van-tab>
    </van-tabs> -->
  </div>
</template>

<script>
import Project from "./components/project.vue";
import MyOrder from "./components/myOrder.vue";
import tab1_income from "@/views/my/my_transaction/tab1_income";
import tab_income from "@/views/my/my_transaction/tab_income";
import { quser_income_info_api} from "@/assets/js/api";
export default {
  components: { Project, MyOrder,tab1_income,tab_income},
  data() {
    return {
      tabActive: 1,
	  total:0.00,
	  yesday:0.00,
	  tday:0.00,
	  total_inc:0.00,
	  is_show:true,
	  show_str:'****'
    };
  },
  methods: {
	selectTab(tabActive){
		this.tabActive = Number(tabActive);
	},
	show(){
		this.is_show = !this.is_show;
	},
    /* 切换 */
    fnBackTab() {
      this.tabActive = Number(localStorage.getItem("market_tab_active"));
      setTimeout(() => {
        localStorage.removeItem("market_tab_active");
      }, 1000);
    },
    /*进入详情*/
    fnGoMarketInfo(item) {
      // console.log(item);
      this.$router.push({
        name: "market_info",
        query: {
          systexId: item.systexId,
          symbol: item.symbol,
          id: item.id,
        },
      });
      localStorage.setItem("market_tab_active", this.tabActive);
    },
	getIncome(){
		quser_income_info_api({
		    quser_id:localStorage.getItem("userId"),
		}).then(res => {

		    if(res.code == 200){
		        this.total = res.data.total;
				this.yesday = res.data.yesday;
				this.tday = res.data.tday;
				this.total_inc = res.data.total_inc;
		    }
		})
	}
  },
  created() {
    this.fnBackTab();
	this.getIncome();
    this.tabActive = Number(this.$route.query.form) || 1;
  },
};
</script>

<style lang="scss" scoped>
// .manageFinances{
//   padding-bottom: 52px;
// }
.head{
		width: 100%;
		height: 250px;
		background-color: #02a7f0;
		color: #ffffff;
		.head-title{
			width: 100%;
			text-align: center;
			padding: 10px 0;
			font-weight: bold;
		}
		.head-ye{
			text-align: center;
			color: #e1e1e1;
			font-size: 14px;
		}
		.head-money{
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			margin-top: 20px;
		}
		.income{
			margin-top: 20px;
			
			span{
				font-size: 14px;
				color: #e1e1e1;
			}
			
			p{
				font-size: 14px;
				font-weight: bold;
			}
		}
		.flex{
			display: flex;
			text-align: center;
		}
		.flex div{
			flex:1;
		}
	}
	.tab{
		width: 94%;
		height: 80px;
		background-color: #ffffff;
		margin: -50px auto 0;
		//margin-top: -50px;
		border-radius: 5px;
		.item{
			flex: 1;
			padding-top: 10px;
			span{
				width: 80%;
				display: block;
				text-align: center;
				font-size: 14px;
				margin-left:10%;
			}
			svg{
				width: 30px !important;
				height: 30px !important;
			}
		}
		.ative{
			border-bottom: 2px solid #02a7f0;
			padding-bottom: 5px;
			width: auto;
		}
	}
</style>